<template>
  <div id="home">
    <nav-bar class="home-nav">
      <div slot="center">购物街</div>
    </nav-bar>
    <tab-control class="tab-control" ref="tabControl1" :titles="titles" @tabClick="tabClick" v-show="isTabFixd"></tab-control>
    <scroll class="content" ref="scroll" :probe-type="3" @scroll="contentScroll" :pull-up-load="true" @pullingUp="loadMore">
      <main-swiper class="home-swiper" :images="banners" @swiperImageLoad="swiperImageLoad"></main-swiper>
      <recommend-view :recommends="recommends"></recommend-view>
      <popular-view></popular-view>
      <tab-control ref="tabControl2" :titles="titles" @tabClick="tabClick"></tab-control>
      <goods-list :goods="showGoods"></goods-list>
    </scroll>
    <back-top @click.native="backClick" v-show="isShowBackTop"></back-top>
  </div>
</template>

<script>
  import RecommendView from "views/home/childComps/RecommendView"
  import PopularView from "./childComps/PopularView"

  import NavBar from "components/common/navbar/NavBar"
  import MainSwiper from "views/home/childComps/MainSwiper"
  import GoodsList from "components/content/goods/GoodsList"
  import Scroll from "components/common/scroll/Scroll"
  import BackTop from "components/content/backTop/BackTop"

  import TabControl from "components/content/tabControl/TabControl"

  import {itemListenerMixin} from "common/mixin"

  import {
    getHomeMultidata,
    getHomeGoods
  } from "network/home/home"

  export default {
    data() {
      return {
        message: '本组件内容',
        banners: [],
        recommends: [],
        titles: ["流行", "新款", "精选"],
        goods: {
          'DEFAULT': {
            page: 0,
            list: []
          },
          'SHOP': {
            page: 0,
            list: []
          },
          'PRODUCT': {
            page: 0,
            list: []
          },
        },
        currentType: 'DEFAULT',
        isShowBackTop: false,
        tabOffsetTop: 0,
        isTabFixd: false,
        saveY:0
      }
    },
    mixins:[itemListenerMixin],
    components: {
      NavBar,
      MainSwiper,
      RecommendView,
      PopularView,
      TabControl,
      GoodsList,
      Scroll,
      BackTop
    },
    created() {
      this.getHomeMultidata();
      this.getHomeGoods('DEFAULT', this.goods['DEFAULT'].page);
      this.getHomeGoods('SHOP', this.goods['SHOP'].page);
      this.getHomeGoods('PRODUCT', this.goods['PRODUCT'].page);
    },
    mounted() {
      // const refresh = debounce(this.$refs.scroll.refresh, 500);
      // this.itemImageListener = () => {
      //   refresh();
      // }
      // this.$bus.$on('itemImageLoad',this.itemImageListener);
    },
    activated() {
      this.$refs.scroll.refresh();
      this.$refs.scroll.scrollTo(0,-this.saveY,0);
    },
    deactivated() {
      this.saveY = this.$refs.scroll.scroll.scrollY;
    },
    methods: {
      swiperImageLoad() {
        this.tabOffsetTop = this.$refs.tabControl2.$el.offsetTop;
      },
      getHomeMultidata() {
        getHomeMultidata().then(res => {
          this.banners = res.banner.list;
          this.recommends = res.recommend.list;
          // console.log(this.banners);
          // console.log(this.recommends);
        });
      },
      // 关注（DEFAULT（默认） SHOP（店铺） PRODUCT（产品） ATTENTION（浏览痕迹））
      getHomeGoods(type, page) {
        getHomeGoods(type, page).then(res => {
          this.goods[type].page++;
          this.goods[type].list.push(...res);
          // console.log(this.goods)
          this.$refs.scroll.finishPullUp();
        });
      },
      // tab按钮点击
      tabClick(index) {
        switch (index) {
          case 0:
            this.currentType = 'DEFAULT';
            break;
          case 1:
            this.currentType = 'SHOP';
            break;
          case 2:
            this.currentType = 'PRODUCT';
            break;
          default:
            break;
        }
        this.$refs.tabControl1.currentIndex = index;
        this.$refs.tabControl2.currentIndex = index;
      },
      backClick() {
        this.$refs.scroll.scrollTo(0, 0, 500);
      },
      contentScroll(position) {
        // console.log(position);
        this.isShowBackTop = position.y < -500 ? true : false;
        this.isTabFixd = (-position.y) > (this.tabOffsetTop)
      },
      loadMore() {
        this.getHomeGoods(this.currentType, this.goods[this.currentType].page);
      }
    },
    computed: {
      showGoods() {
        return this.goods[this.currentType].list;
      }
    }
  }
</script>

<style scoped="scoped">
  .home-nav {
    background-color: var(--color-tint);
    color: white;
  }

  #home {}

  .home-swiper {
    /* padding-top: 44px; */
  }

  .tab-control {
    position: relative;
    z-index: 9;
  }

  .content {
    height: calc(100vh - 95px);
    overflow: hidden;
  }

  .fixed {
    position: fixed;
    left: 0;
    right: 0;
    top: 44px;
  }
</style>
